var ec_left2 = echarts.init(document.querySelector(".line .chart"));

var ec_left2_charts = {
    unit: '台',
    names: ['计划产出', '实际产出'],
    lineX: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
    value: [
        [250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250],
        [260, 145, 180, 192, 230, 180, 192, 180, 50, 153, 152, 28, 125, 245, 65, 125, 168, 208, 253, 198]
    ]

}

var color = ["#00f2f1", "#ed3f35"]
var lineY = []

for (var i = 0; i < ec_left2_charts.names.length; i++) {
    var x = i
    if (x > color.length - 1) {
        x = color.length - 1
    }
    var data = {
        name: ec_left2_charts.names[i],
        type: 'line',
        color: color[x] + ')',
        smooth: true,
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: color[x] + ', 0.3)'
                }, {
                    offset: 0.8,
                    color: color[x] + ', 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        symbol: 'circle',
        symbolSize: 5,
        data: ec_left2_charts.value[i]
    }
    lineY.push(data)
}

lineY[0].markLine = {
    silent: true
}
var ec_left2_Option = {
    // backgroundColor:'#1b2735',
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ec_left2_charts.names,
        textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,.6)'
        },
        right: '4%'
    },
    grid: {
        top: '14%',
        left: '4%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ec_left2_charts.lineX,
        axisLabel: {
            textStyle: {
                color: 'rgba(255,255,255,.6)'
            },
            formatter: function(params) {
                return params.split(' ')[0]
            }
        }
    },
    yAxis: {
        name: ec_left2_charts.unit,
        type: 'value',
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: 'rgba(255,255,255,.6)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.6)'
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.6)'
            }
        }
    },
    series: lineY
}


setInterval(() => {
    ec_left2.setOption({
      legend: {
        selected: {
          '计划产出': false,
          '实际产出': false
        }
      }
    })
    ec_left2.setOption({
      legend: {
        selected: {
          '计划产出': true,
          '实际产出': true
        }
      }
    })
},10000)

ec_left2.setOption(ec_left2_Option)
window.addEventListener("resize", function () {
	ec_left2.resize();
});
